<template>
  <div class="bindec">
    <h1>进制数在线转换器</h1>
    <h3>支持在2~36进制之间进行任意转换，支持浮点型</h3>
    <div class="input">
      <div class="checkPannel">
        <div class="item" v-for="item in defaultBins" :key="item">
          <input
            type="radio"
            name="inRadio"
            :id="'in' + item"
            :value="item"
            v-model="inputBin"
          />
          <label :for="'in' + item">{{ item }}进制</label>
        </div>

        <select name="bin" id="#bin" class="selectBox" v-model="inputBin">
          <option v-for="i in 35" :key="i" :value="i + 1">
            {{ i + 1 }}进制
          </option>
        </select>
      </div>
      <label for="inputBox">输入:</label>
      <input
        type="text"
        name=""
        id="inputBox"
        class="inputBox"
        placeholder="输入要转换的数值"
        v-model="inputValue"
      />
    </div>
    <div class="output">
      <div class="checkPannel">
        <div class="item" v-for="item in defaultBins" :key="item">
          <input
            type="radio"
            name="outRadio"
            :id="'out' + item"
            :value="item"
            v-model="outputBin"
          />
          <label :for="'out' + item">{{ item }}进制</label>
        </div>

        <select name="bin" id="#bin" class="selectBox" v-model="outputBin">
          <option v-for="i in 35" :key="i" :value="i + 1">
            {{ i + 1 }}进制
          </option>
        </select>
      </div>
      <label for="outputBox">结果:</label>
      <input
        type="text"
        id="outputBox"
        class="outputBox"
        placeholder="转换结果"
        v-model="outputValue"
      />
    </div>
    <button @click="CopyResult">复制结果</button>
  </div>
</template>

<script setup >
import useClipboard from "vue-clipboard3";
const { toClipboard } = useClipboard();

import { computed, reactive, ref, watch, watchEffect } from "vue";
let defaultBins = reactive([2, 4, 8, 10, 16, 32]);
let inputValue = ref("");
let inputBin = ref(2);
let outputBin = ref(10);

let outputValue = computed(() => {
  return isNaN(parseInt(inputValue.value, inputBin.value))
    ? ""
    : parseInt(inputValue.value, inputBin.value).toString(outputBin.value);
});

watch([inputBin, outputBin], () => {
  inputValue.value = "";
});

async function CopyResult() {
  try {
    await toClipboard(outputValue.value);
    console.log("Copied to clipboard");
  } catch (e) {
    console.error(e);
  }
}
</script>

<style lang="less" scoped>
.bindec {
  width: 60%;
  border: 1px solid black;
  margin: 0 auto;
  padding: 20px 10px;
  border-radius: 5px;
  background-color: var(--surface2);
  h1,
  h3 {
    color: var(--element2);
  }
  .input,
  .output {

    label{
    color: var(--element2);
    }

    .checkPannel {
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--element2);
      .selectBox {
        margin-left: 10px;
        font-size: 20px;
        background-color: var(--primary);
        color: var(--surface2);
      }
    }
    .inputBox,
    .outputBox {
      width: 60%;
      height: 30px;
      margin-top: 10px;
      margin: 20px;
    }
  }
  button {
    width: 50%;
    height: 40px;
    background-color: var(--primary);
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
  }
  button:hover {
    background-color: var(--secondary);
    transform: translateY(-1px);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
  }
}
</style>